// 库引入
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';
import {Row, Col} from 'antd';
import {Link} from 'react-router-dom';
import {observable, action} from 'mobx';

// 组件引入
import {Logo} from '../Logo';

// 样式引入
import styles from './style.module.less';

@observer
class NavTop extends Component {

  // 指示导航列表是否折叠
  @observable navCollapsed = true;

  // 切换导航列表的折叠状态
  @action toggleNavCollapsed = () => {
    this.navCollapsed = !this.navCollapsed;
  }

  render() {
    return (
      <div
        className={classNames(styles.navTop, this.props.className)}
        style={this.props.style}>
        <Row type="flex" justify="space-between" align="middle">
          <Col>
            <Logo/>
          </Col>
          <Col sm={{
            span: 0
          }}>
            <i
              className={classNames("iconfont icon-liebiaoshitucaidan", styles.iconMore)}
              onClick={this.toggleNavCollapsed}></i>
          </Col>
          <Col span={24} className={classNames(styles.navCol)}>
            <nav
              className={classNames(styles.nav, {
              [styles.collapsed]: this.navCollapsed
            })}>
              <Link className={classNames(styles.navLink)} to="/">Api</Link>
              <Link className={classNames(styles.navLink)} to="/">博客</Link>
              <Link className={classNames(styles.navLink)} to="/">关于</Link>
            </nav>
          </Col>
        </Row>
      </div>
    );
  }
}

NavTop.defaultProps = {
  className: 'NavTop'
};

const InjectNavTop = inject(({
  someStore = {}
}) => ({someProps: someStore.attribute}))(NavTop);

export {NavTop, InjectNavTop};